<template>
  <div class="notify my-[50px]">
    <!-- //图片插槽 -->

    <div class="top flex justify-between items-center">
      <slot name="icon"> 111 </slot>
      <span class="font-extrabold cursor-pointer">{{ props.title }}</span>

      <span class="font-extrabold cursor-pointer text-blue-600/100">全部></span>
    </div>

    <div class="main flex">
      <div class="item mt-[5px] flex items-center truncate" v-for="item in props.list">
        <div class="circle mr-[8px] w-[5px] h-[5px] rounded-[50%]" :style="{ backgroundColor: props.color }"></div>
        <p class="truncate w-[100%]">{{ item.title }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
interface listType {
  title: String;
}
let props = defineProps({
  title: {
    type: String,
    default: '公告',
  },
  color: {
    type: String,
    default: '#cfc',
  },
  list: {
    type: Array<listType>,
    default: () => [{ title: '八嘎呀路' }],
  },
});
</script>

<style scoped lang="scss"></style>
